/**
 * @Creator: fenglingxia
 * @Date: 2020/3/18
 * 用户特征-运营商及网络环境分布
 */
import React, {useContext} from 'react';
import {Table, Empty} from 'antd';
import {StoreContext} from '../data';
import {generatePieData} from '../../utils';
import './index.styl';
import PieComponent from '../PieComponent';

export default props => {

    const {state: {carrierSearchResult, netTypeSearchResult, osAndNetLoading}} = useContext(StoreContext);
    // 用户特征-运营商头部
    const USER_FEATURE_OPERATOR_TABLE_HEAD = [
        {
            title: '运营商',
            dataIndex: 'field',
            key: 'field_carrier'
        },
        {
            title: '人次',
            dataIndex: 'pv',
            key: 'pv_carrier'
        },
        {
            title: '占比',
            dataIndex: 'percent',
            key: 'percent_carrier'
        }
    ];

    // 用户特征-网络情况头部
    const USER_FEATURE_NETWORK_TABLE_HEAD = [
        {
            title: '网络情况',
            dataIndex: 'field',
            key: 'field_net'
        },
        {
            title: '人次',
            dataIndex: 'pv',
            key: 'pv_net'
        },
        {
            title: '占比',
            dataIndex: 'percent',
            key: 'percent_net'
        }
    ];

    return (
        <div className="container">
            <div className="item">
                <div>
                    <h3>运营商</h3>
                    {(carrierSearchResult.length === 0 && !osAndNetLoading) ? (
                        <Empty imageStyle={{height: 70}} image={Empty.PRESENTED_IMAGE_SIMPLE} />
                    ) : (
                        <PieComponent title="carrier" dataSource={generatePieData(carrierSearchResult)} />
                    )}
                </div>
                <Table
                    className="table"
                    columns={USER_FEATURE_OPERATOR_TABLE_HEAD}
                    dataSource={carrierSearchResult}
                    size="small"
                    bordered={false}
                    pagination={carrierSearchResult.length > 10}
                    loading={osAndNetLoading}
                />
            </div>
            <hr className="line" />
            <div className="item">
                <div>
                    <h3>网络情况</h3>
                    {(netTypeSearchResult.length === 0 && !osAndNetLoading) ? (
                        <Empty imageStyle={{height: 70}} image={Empty.PRESENTED_IMAGE_SIMPLE} />
                    ) : (
                        <PieComponent title="net" dataSource={generatePieData(netTypeSearchResult)} />
                    )}
                </div>
                <Table
                    className="table"
                    columns={USER_FEATURE_NETWORK_TABLE_HEAD}
                    dataSource={netTypeSearchResult}
                    size="small"
                    bordered={false}
                    pagination={netTypeSearchResult.length > 10}
                    loading={osAndNetLoading}
                />
            </div>
        </div>
    );
};
